@layer base {
  html {
    font-size: 14px !important;
  }

  *,
  ::before,
  ::after {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
  }

  input,
  textarea {
    -webkit-appearance: none; /*去除ios阴影*/
  }
}

@layer utilities {
  @responsive {
    .scrolling-touch {
      -webkit-overflow-scrolling: touch;
    }
    .scrolling-auto {
      -webkit-overflow-scrolling: auto;
    }
  }
}

@layer components {
  /* 纵向平滑滚动 */
  .overflow-y-scroll-smooth {
    @apply overflow-y-scroll scrolling-touch static;
  }

  /* 横向平滑滚动 */
  .overflow-x-scroll-smooth {
    @apply overflow-x-scroll scrolling-touch static;
  }

  /*宽高等比*/
  .wh-const::before {
    content: "";
    padding-top: 100%;
    float: left;
  }
  .wh-const::after {
    content: "";
    display: block;
    clear: both;
  }

  /* 隐藏滚动条 */
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }

  /* 文字渐变 */
  .bg-clip-text {
    -webkit-background-clip: text;
  }

  /*vue 渲染完成后显示*/
  [v-cloak] {
    display: none !important;
  }
}
